<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />

        <title>Kasutajaliidesed</title>

        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery.pagination.js"></script>
        <script type="text/javascript" src="js/jquery.json-2.3.js"></script>
        <script type="text/javascript" src="js/jquery.dataprocessing.js"></script>

        <script type="text/javascript" src="js/kaslid.main.js"></script>
        <script type="text/javascript" src="js/kaslid.tags.js"></script>
        <script type="text/javascript" src="js/kaslid.colorpicker.js"></script>

        <link rel="stylesheet" href="css/style.css"/>
        <link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.18.custom.css" />

    </head>
    <body class="body-dark">
        <form id="signout-form" action="index.html" method="post">
            <input type="hidden" name="login" value=""/>
            <button class="dark" id="sign-out">Sign out</button>
        </form>
        <div id="overlay"></div>
        <div id="main-wrapper">
            <div id="header-wrapper">
                <div id="logo">
                    <a href="index.html" title="TODO">
                        <img src="img/logo1.png" alt="TODO"/>
                    </a>
                </div>
                <div class="dark" id="menu">
                    <ul>
                        <li class="menuitem" id="new-todo-show" data-show="false">Add TODO</li>
                        <li class="menuitem selected" id="active-todos" data-show="false">Active TODOs</li>
                        <li class="menuitem" id="completed-todos" data-show="false">Completed TODOs</li>
                        <li class="menuitem" id="settings-show" data-show="false">Settings</li>
                    </ul>
                    <span class="dark" id="search-form">
                        <div id="search-field">
                            <input type="text" id="search-keyword" placeholder="todo name" />
                            <button id="clear-search"/>
                        </div>
                        <button class="dark" id="search">Search</button>
                        <button class="dark" id="advanced-search-show" data-show="false">Advanced search</button>
                    </span>
                </div>

                <div class="submenu" id="new-todo">
                    <h3>New TODO</h3>
                    <label>Type:</label>
                    <input id="urgent" type="checkbox" />urgent
                    <input id="important" type="checkbox" />important
                    <label>Category</label>
                    <div id="todo-category-container">
                        <select id="category" class="category-container"></select>
                        <span>or type in new one</span>
                        <input type="text" class="newcategory" name="newcategory" placeholder="New category..." />
                    </div>
                    <label>Name:</label><input id="name" type="text" />
                    <label>Deadline:</label><input id="deadline" type="text" />
                    <label>Description (optional): </label>
                    <textarea id="description" rows="4"></textarea>
                    <label>State:</label>
                    <select id="state">
                        <option value="Undone">Undone</option>
                        <option value="In progress">In progress</option>
                        <option value="Pending">Pending</option>
                        <option value="Completed">Completed</option>
                        <option value="Cancelled">Cancelled</option>
                    </select>
                    <label>Tags:</label>
                    <div id="todo-for-tags"></div>
                    <input id="todo-tags" type="text" name="tags"/>
                    <div class="tip">* You can type new tags here using the whitespace as the delimiter</div>
                    <button class="dark" name="todo-submit" id="addTodo">Submit</button>
                    <button class="dark" name="todo-edit" id="editTodo">Save</button>
                    <button class="dark" id="cancel-todo">Cancel</button>
                </div>

                <div class="submenu" id="settings">
                    <h3>Settings</h3>
                    <label>Color theme:</label>
                    <select id="colortheme-picker">
                        <option value="cyan">Cyan</option>
                        <option selected="selected" value="dark">Dark</option>
                        <option value="google-blue">Google-blue</option>
                        <option value="gray">Gray</option>
                        <option value="magenta">Magenta</option>
                        <option value="orange">Orange</option>
                        <option value="yellow">Yellow</option>
                    </select>
                    <div id="todo-display-settings">
                        <label>Todos on page:</label>
                        <select id="showOnPage">
                            <option value="5">5</option>
                            <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="30">30</option>
                            <option value="50">50</option>
                        </select>
                        <label>Sort by:</label>
                        <select id="sortBy">
                            <option value="created"></option>
                            <option value="name">Name</option>
                            <option value="description">Description</option>
                            <option value="state">State</option>
                        </select>
                        <label>Sort direction:</label>
                        <select id="sortDir">
                            <option value="ASC">Ascending</option>
                            <option value="DESC">Descending</option>
                        </select>
                    </div>
                    <button class="dark" id="cancel-settings">Close</button>
                </div>

                <div class="submenu" id="advanced-search-form">
                    <h3>Advanced search</h3>
                    <label>Name contains</label>
                    <input type="text" id="search-name" />
                    <label>Description contains</label>
                    <input type="text" id="search-description" />
<!--                    <input type="checkbox" id="search-isurgent">is urgent?
                    <input type="checkbox" id="search-isimportant">is important?-->
                    <label>Category</label>
                    <select id="search-category" class="category-container"></select>
<!--                    <label>Date</label>
                    <div class="search-date">From: <input type="text" id="search-date-from"></div>
                    <div class="search-date">To: <input type="text" id="search-date-to"></div>-->
                    <label>State</label>
                    <select id="search-state">
                        <option selected="selected" value=""></option>
                        <option value="Undone">Undone</option>
                        <option value="In progress">In progress</option>
                        <option value="Pending">Pending</option>
                        <option value="Completed">Completed</option>
                        <option value="Cancelled">Cancelled</option>
                    </select>
                    <label>Tags</label>
                    <select id="search-tags" size="5" multiple>

                    </select>
                    <div>
                        <button class="dark" name="advanced-search" id="advanced-search">Search</button>
                        <button class="dark" id="cancel-advanced-search">Cancel</button>
                    </div>
                </div>

            </div>
            <!--end header-wrapper-->

            <div id="content-wrapper">
                <div class="right-panel">
                    <div class="category-container" >
                        <h3>Category</h3>
                        <ul>
                        </ul>
                        <input type="text" class="newcategory" name="newcategory" placeholder="New category..." />
                        <button class="dark addcategory" name="addcategory">Add</button>
                        <button class="dark" id="deletecategories" name="deletecategories">Edit</button>
                    </div> <!--end of category-container -->
                    <div class="tag-container" >
                        <h3>Tags</h3>
                        <ul>
                        </ul>
                        <input type="text" id="newtag" name="newtag" placeholder="New tag..." />
                        <button class="dark" id="addtag" name="addtag">Add</button>
                        <button class="dark" id="deletetags" name="deleteTags">Edit</button>
                    </div> <!--end of tag-container -->
                </div> <!--end of right-panel -->

                <div class="main">
                    <h2 id="current-category">Category: <span>All</span></h2>
                    <div class="for-pagination"></div>
                    <div>
                    </div>
                    <div id="todo-wrapper"></div>

                    <div class="for-pagination"></div>

                </div><!--end of main -->

                <div style="clear: both;"></div>
            </div> <!--end of content-wrapper-->

            <div id="footer-wrapper">
                <ul id="footer-container-right">
                    <li id="copyright">
                        Copyright © 2012
                        <a href="" title="// TODO:">// TODO:</a>
                        . All Rights Reserved
                    </li>
                    <!--end copyright-->
                    <li id="designed">
                        Designed by Nail Saberov & Dmitri Maksimov
                    </li>
                    <!--end designed -->
                </ul>
            </div> <!--end footer-wrapper-->

        </div><!--end main wrapper-->
    </body>
</html>
